<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS - Web 字体</title>
  <style>

    body {
      padding: 0 40px;
    }
    
    /* 自定义图标 */
    @font-face {
      /* 自定义字体名称 */
      font-family: 'xiaofeng';
      /* 导入自定义字体文件 */
      src: url('./fonts/xiaofeng.eot'); /* IE9*/
      src:
        url('./fonts/xiaofeng.eot?#font-spider') format('embedded-opentype'), /* IE6-IE8 */
        url('./fonts/xiaofeng.woff') format('woff'), /* chrome、firefox */
        url('./fonts/xiaofeng.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('./fonts/xiaofeng.svg') format('svg'); /* iOS 4.1- */
      font-weight: normal;
      font-style: normal;
    }

    .webfont {
      font-size: 40px;
      font-family: xiaofeng;
      color: red;
    }
  </style>
</head>
<body>
  <h3>Web字体</h3>
  <p>使用自定义的字体，而不是操作系统自带的字体</p>

  <p class="webfont">字蛛是一个中文字体压缩器</p>
</body>
</html>